<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Vue实例_生命周期</title>
</head>

<body>

  <div id="test">
    <button @click="destroyVue">destory vue</button>
    <p v-if="isShow">新年快乐</p>
  </div>

  <script type="text/javascript" src="../js/vue.js"></script>
  <script type="text/javascript">
    new Vue({
      el: '#test',
      data: {
        isShow: true
      },

      // 初始化阶段
      beforeCreate() {
        console.log('beforeCreate()')
      },

      created() {
        console.log('created()')
      },

      beforeMount() {
        console.log('beforeMount()')
      },

      mounted() {
        console.log('mounted()')
        // 执行异步任务
        this.intervalId = setInterval(() => {
          this.isShow = !this.isShow
        }, 1000)
      },

      // 更新显示
      beforeUpdate() {
        console.log('beforeUpdate()')
      },
      updated() {
        console.log('updated()')
      },

      // 死亡阶段
      beforeDestroy() {
        console.log('beforeDestroy()')
        // 执行收尾的工作
        clearInterval(this.intervalId)
      },

      destroyed() {
        console.log('destroyed()')
      },

      methods: {
        destroyVue() {
          this.$destroy()
        }
      }
    })
  </script>
</body>

</html>